<?php $this->headStyle()->captureStart(); ?>
    #projects { width: 600px; float:left; }
    #settings { width: 400px; float:right; margin-right:20px; }
    #tabs { width: 400px; height: 450px; margin-right: -10px;}
    ul.ui-autocomplete { max-height: 100px; overflow: auto;}
    .ui-button { float:right; }
    .error { margin-left: -40px; font-size: 12px; }
    .error strong { font-weight: bolder; }
    .config { max-height: 370px; overflow: auto !important; }
    div.project {min-height: 100px;}
    span.date { float: right;}
    #test-result { width: 600px; height: 200px; }
    #test-result div, #scan-result div { font-family:Courier; font-size: 14px; }
<?php $this->headStyle()->captureEnd(); ?>
<?php $this->headScript()->captureStart(); ?>
    var delProject = "";
    function initForm() {
        $("#tabs").tabs();
        $("#dbTest").button();
        $("#submit").button();
        $("ul.errors").errorStyle();
        $("input#projectPath").autocomplete({source:"/index/path-complete/"});
        $("input#testsPath").autocomplete({source:"/index/path-complete/"});
        $("#del-dialog").dialog({
            autoOpen: false,
            width: 500,
            buttons: { // якщо відповідь на підтвердження "Ні"
                    "<?php echo $this->translate("[NO]"); ?>": function() {
                        $(this).dialog("close"); 
                        delProject = "";
                    }, // якщо відповідь на підтвердження "Так"
                    "<?php echo $this->translate("[YES]"); ?>": function() { 
                        $.get('/index/del/project/' + delProject, function(content) {
                            $("#del-dialog").dialog("close");
                            if (content == 'ok') { // якщо нема помилок
                                $("#project-title-" + delProject).remove(); 
                                $("#project-content-" + delProject).remove(); 
                            }
                            else // якщо помилка видалення
                                showError(content);
                            delProject = "";
                        });
                    } 
            }
        });
        $("#dbTest").click(function(){
            var params = 'adapter=' + $('#dbAdapter').val()
                       + '&host=' + $('#dbHost').val()
                       + '&username=' + $('#dbUsername').val()
                       + '&password=' + $('#dbPassword').val();
            $.post('/index/test-db', params,
                    function(response) {
                        $('<div title="' + _('[RESULT]') + '">' + response + '</div>').dialog({
                            buttons: {
                                "<?php echo $this->translate("[OK]"); ?>": function() {
                                        $(this).dialog("close"); 
                                }
                            }
                        });
                    });
        });
    }    
    
    /**
     * функція яка визивається після підключення jQuery
     */
    function init() {
        initForm();
        $("#projects-list").accordion({active: false});
        $("button.test").button({icons: {primary: 'ui-icon-play'}, text:true});
        $("button.scan").button({icons: {primary: 'ui-icon-gear'}, text:true});
        $("button.edit").button({icons: {primary: 'ui-icon-wrench'}, text:false});
        $("button.del").button({icons: {primary: 'ui-icon-trash'}, text:false});
    }
    
    /**
     * запитує чи видаляти, видаляє
     * @param string project - кодова назва проекту
     */
    function del(project) {
        delProject = project;
        $('#project-alias').html(project);
        $('#del-dialog').dialog('open');
    }
    
    /**
     * відкриває форму редагування проекту
     * @param string project - кодова назва проекту
     */
    function edit(project) {
        $.get('/index/edit/project/' + project, 
               function(content) {
                    $('#form').replaceWith(content).ajaxUI('stop');
                    initForm();
                });
        $('#form').ajaxUI();
    }
    
    var needToCheckTestResults = false;
    var needToCheckTestResults = false;
    
    /**
     * функція запуску тестів
     */
    function run(project) {
        $.get('/index/get-code/project/' + project,
              function(response) {
                    json = $.parseJSON(response);
                    if (!json.code)
                        showError(json.error);
                    else {
                        needToCheckTestResults = true;
                        setTimeout("check('" + json.code + "')", 1000);
                        $.get('/run-tests/' + json.code,
                              function(response) {
                                needToCheckTestResults = false;
                                $('#test-result').ajaxUI({animation:'line',
                                                          action: 'stop'});
                              });
                        $('#test-result').info().ajaxUI({animation: 'line',
                                                         height: 20,
                                                         opacity: 1});
                    }
              });
    }

    /**
     * функція отримання списку директорій
     */
    function check(code) {
        console.log('check', code);
        $.get('/index/check-tests/code/' + code,
              function(response) {
                $('#test-result div.ui-widget-content').append(response.replace(/\n/g, "<br />"));
              });
        if (needToCheckTestResults)
            setTimeout("check('" + code + "')", 1000);
    }
    
    function checkScan(code) {
        $.get('/index/check-scan/code/' + code,
              function(response) {
                $('#scan-result div.ui-widget-content').append(response.replace(/\n/g, "<br />")
                                                                       .replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;"));
              });
        if (needToCheckScanResults)
            setTimeout("checkScan('" + code + "')", 1000);
    }
    
    function scan(project) {
        $.get('/index/get-code/do/scan/project/' + project,
              function(response) {
                    json = $.parseJSON(response);
                    if (!json.code)
                        showError(json.error);
                    else {
                        needToCheckScanResults = true;
                        checkScan(json.code);
                        console.log('/scan/'+json.code);
                        $.get('/scan/'+json.code, function(response) {
                            needToCheckScanResults = false;
                            $('#scan-result').ajaxUI({animation: 'line',
                                                      action: 'stop'});
                        });
                        $('#scan-result').info({
                                            width: 600,
                                            height: 400,
                                            close: false
                                          })
                                         .ajaxUI({
                                            animation: 'line',
                                            height: 20,
                                            opacity: 1
                                          });
                    }
              });
    }
<?php $this->headScript()->captureEnd(); ?>    
<div id="projects">
    <?php if (count($this->projects)): ?>
    <div id="projects-list">
        <?php foreach ($this->projects as $project): ?>
        <h3 id="project-title-<?php echo $project->config->alias; ?>">
            <a href="#">
                <span>
                    <?php echo $project->config->name; ?>
                    (<?php echo $project->config->alias; ?>)
                </span>
                <span class="date"><?php echo $project->config->date; ?></span>
            </a>
        </h3>
        <div id="project-content-<?php echo $project->config->alias; ?>" class="project">
            <div class="left">
                <button onclick="run('<?php echo $project->config->alias; ?>')" class="test"><?php echo $this->translate('[PROJECT_RUN_TESTS]'); ?></button>
                <button onclick="scan('<?php echo $project->config->alias; ?>')" class="scan"><?php echo $this->translate('[PROJECT_SCAN]'); ?></button>
            </div>
            <div class="right">
                <button onclick="del('<?php echo $project->config->alias; ?>')" class="del">Del</button>
                <button onclick="edit('<?php echo $project->config->alias; ?>')" class="edit">Edit</button>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>
</div>
<div id="settings">
    <?php echo $this->render('index/edit.phtml'); ?>
</div>
<div id="del-dialog" title="<?php echo $this->translate('[CONFIRMATION_DELETE]'); ?>" style="display:none;">
    <p><?php echo $this->translate('[QUESTION_DELETE_PROJECT]'); ?></p>
</div>
<div id="test-result" style="display:none;"><br/></div>
<div id="scan-result" style="display:none;"><br/></div>
<div class="ajax" style="display:none;"></div>
<div class="ajax-line" style="display:none;"></div>